<template>
  <div>
    <Title :title="'车流量统计'"/>
    <div class="box">
      <img :src="'[publicPath]static/images/componentright/img_cheliuliang.png'" alt="">
      <div class="text text1">
        <strong>{{dataList.avgSpeed}}</strong><p>平均车速(km/h)</p>
      </div>
      <div class="text text2">
        <strong>{{dataList.avgLength}}</strong><p>平均通行（辆/min）</p>
      </div>
      <div class="text text3">
        <strong>{{dataList.sum + ''}}</strong><p>路口车辆总数（辆）</p>
      </div>
    </div>
    <div class="ec-wrap">
        <!-- ECHART示例 -->
        <EcResize :option="ecOption" />
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted, watch } from 'vue';
import EcResize from '@sutpc/vue3-ec-resize';
import Title from './title.vue'
import { useUserStore } from '@/store/user';
// import { xiaoche } from '@/assets/images/imagesIn'
import { getCarFlowStatistic, getVehicleLine } from '../../../utils/apiComponent'

export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title,
    EcResize
  },
  setup() {
    const data = reactive({
      dataList:{
        "sum": 0,
        "avgSpeed": "0",
        "avgLength": "0"
      },
      messagLineChart: {
        value: [21,	23,	27,	28,	24,	25,	19,	28,	17,	25,	19,	27,	25,	26,	27,	28,	26,	26,	17,	25,	24,	26,	28,	27,	25,	27,	28,	28,	29,	23,],
        xAixs: ['1', '', '', '', '5', '', '', '', '', '10', '', '', '', '', '15', '', '', '', '', '20', '', '', '', '', '25', '', '', '', '', '30']
      },
    })
    const ecOption = computed(() => {
      return {
        title: {
          text: '单位(个)',
          show: true,
          left: '0',
          top: '0',
          color: 'rgba(255, 255, 255, 0.80)'
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(9, 88, 155, 1)'
          }, {
            offset: 1, color: 'rgba(19, 198, 230, 0.77)'
          }]
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        // formatter: function (params) {
        // var res =
        //   "<div style='margin-bottom:5px;width:100%;padding: 0 12px;height:24px;line-height:24px;border-radius:3px; text-align: left'><p>" +
        //   params[0].name +
        //   " </p></div>";
        // for (var i = 0; i < params.length; i++) {
        //   res += `<div style="color: #000;font-size: 14px; padding:0 12px;line-height: 24px">
        //       <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
        //         params[i].color,
        //       ]};"></span>
        //       平均速度
        //       ${params[i].data}m/s
        //     </div>`;
        // }
        // return res;
        // },
        },
        legend: {
          show: false,
          orient: 'horizontal',
          selectedMode: false,
          right: 40
        },
        grid: {
          left: '8px',
          right: '3%',
          bottom: '0%',
          top: '30px',
          containLabel: true
        },
        axisLine: {
          lineStyle: {
            opacity: 1
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: data.messagLineChart.xAixs,
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.80)',
            // interval: 3,
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0)',
              width: 0.1
            }
          }
        }],
        yAxis: [{
          type: 'value',
          show: true,
          // splitNumber: 3,
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(255, 255, 255, 0.80)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(230, 247, 255, 0.30)',
              width: 0.3
            }
          }
        }
        ],
        series: [{
          name: name,
          type: 'bar',
          barWidth: 8,
          smooth: true,
          // lineStyle: {
          //   width: 0
          // },
          showSymbol: false,
          itemStyle: {
            barBorderRadius: [20, 20, 0, 0]
          },
          // areaStyle: {
          //   opacity: 1,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //     offset: 0,
          //     color: 'rgba(88, 116, 180, 0.4)'
          //   }, {
          //     offset: 0.5,
          //     color: 'rgba(88, 116, 180, .2)'
          //   }, {
          //     offset: 0.9,
          //     color: 'rgba(88, 116, 180, 0)'
          //   }])
          // },
          // emphasis: {
          //   focus: 'series'
          // },
          data: data.messagLineChart.value
        }
        ]
      }
    });
    const initData = () => {
      getCarFlowStatistic().then((res) => {
        // console.log(res)
        data.dataList = res
      })
      getVehicleLine().then((res) => {
        // console.log(res)
        data.messagLineChart.value = []
        data.messagLineChart.xAixs = []
        // data.dataList = res
        res.forEach(item => {
          data.messagLineChart.value.push(item.sum)
          data.messagLineChart.xAixs.push(item.time)
        })
      })
    }
    const userStore = useUserStore()
    // 获取搜索路口值
    const searchValue = computed(() => {
      initData()
      return userStore.getSearchValueId
    })
    watch(searchValue, () => {})

    onMounted(() => {
      initData()
    })
    const refData = toRefs(data)
    return {
      ...refData,
      ecOption,
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  height: 164px;;
  margin-bottom: 10px;
  // background: url('@{publicPath}static/images/componentright/img_cheliuliang.png') no-repeat;
  // background-position: center;
  position: relative;
  margin-top: 20px;
  font-size: 12px;
}
.box img{
  width: 400px;
  height: 164px;;
  margin: 0 auto
}
.text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
}
.text1{
  top: 20px;
  left: 0
}
.text2{
  top: 20px;
  right: 0
}
.text3{
  top: -20%;
  left: 40%;
}
.text1 strong, .text2 strong{
  color: #00F6FD;
  font-size: 24px;
}
.text3 strong{
  color: #fff;
  font-size: 24px;
}
.ec-wrap {
  width: 100%;
  height: 260px;
  margin-bottom: 30px;
}
</style>